<template>
  <div>
    <form>
      <div class="form-div">
        上边距:<input class="form-input" type="range" min="0" max="200" v-model="position.top"/>
      </div>
      <div class="form-div">
        左边距:<input class="form-input" type="range" min="0" max="200" v-model="position.left"/>
      </div>
      <div class="form-div">
        宽度:<input class="form-input" type="range" min="400" max="800" v-model="position.width"/>
      </div>
      <div class="form-div">
        长度:<input class="form-input" type="range" min="400" max="800" v-model="position.height"/>
      </div>
    </form>
  </div>

</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      position: {
        top: 0,
        left: 0,
        width: 400,
        height: 400
      }
    }
  },
  watch: {
    position: {
      deep: true,
      handler: function(val,oldVal){
        this.changePosition(val);
      }
    }
  },
  methods:{
    ...mapActions([
      'changePosition'
    ]),
  }
}
</script>

<style>
  .form-div {
    height: 50px;
  }

  .form-input {
    width: 200px;
  }
</style>


